SCS Templates - Widgets

Radial Gauges

Gauges provide the ability to display real time data feeds coming from ACQ on your user interface.  You can only display distinct data items (data fields) as full RAW messages are usually not a single numeric value.  Gauges come in 3 flavors: Linear, Radial and Numeric.  They are very useful for illustrating a progress towards a goal, the current status of some value within a range of upper and lower bounds, or a summary of some fluctuating metric.

 

Radial Gauges represent data on a linear scale.  

 

Designing the Widget

Click the Radial link under the Gauges group in the Manage My Widgets panel then click the +Create New Radial Gauge button on top of the grid.

 

Enter the standard information for widget creation including a name, description, any keywords and permission level you wish this template to have and hit OK.

This will bring you to the editor for this widget.

 

This image indicated the major components you can edit, details regarding each can be found in the following sections.

 

 

The editor for radial gauges is mainly comprised of a tab strip with 5 tabs:

Pointers

The Pointers tab is where you define the actual indicator which moves on the gauge to display the current value of the underlying sensor item.  You must have at least one pointer on your gauge for it to make any sense, multiple pointers are supported if you have many datafields you would like displayed at the same time on the same gauge.

 

Each pointer represents a single real time data item.  To add a pointer to your gauge click the +Add Pointer button located at the top of the pointer grid. 

You will be presented with the editor for a pointer. 

 

At the top you will see the option to select the source of the pointer data.  Whatever datafield you select here will be what the pointer shows when the gauge is running.  

 

If you have chosen to not use a theme (it is recommended you always use a theme) you may specify an explicit color to use for your pointer. 

 

Use the Cap Color setting to change the color of the Cap for the given pointer

 

Use the Cap Size setting to increase or decrease the displayed size of the Cap for the pointer.

 

 

Custom Labels

The gauge allows you to integrate zero or more custom text elements.  While some gauges may make sense on their own or inside a larger custom widget, most gauges would need a label of sorts so the user knows what exactly they're looking at.  For instance a circular gauge could be representing a COG, Wind Direction or any other number of data sources.  If a user just casually looks at the gauge they will know what it's current value is, but will have no idea what "it" is.  Adding a label will help clarify what your gauge represents. It's recommended to add at least one label with the name of the pointer source or a higher level descriptor (eg "True Wind").  To add a label to your gauge click the +Add Custom Label button located at the top of the custom labels grid. 

You will be presented with the editor for a custom label. 

 

The First input is where you specify the actual content / text of the label

 

The Font will allow you to change the size and selected font of the label

 

 

 

The position allows you to specify the offset (percentage) of the label.  The first input is horizontal offset (eg a value of 50 would mean the label starts min the middle of the screen)

The second input is the vertical offset (eg a value of 50 would mean the label starts halfway down the screen)

 

 

If you have chosen to not use a theme (it is recommended you always use a theme) you may specify an explicit color to use for your pointer. 

 

 

 

Gauge Area

The Gauge Area tab is where you define settings related to the frame and background of the overall gauge.  The border is used to define a wrapper which goes around the gauge.  The margin is used to specify spacing around the gauge, the larger the number to more 'buffer space' you will see in that area of the gauge.

 

Scale

The Scale tab is where you define settings related to the scale associated with the pointer.  It has a few subsections which can be used to refine details of your display. 

The General Settings section allows you to specify a most of the primary details relevant to making your display relevant and useful.  Namely:

 

Minimum: The lowest numeric value the pointer can go to.

 

Maximum: The highest numeric value the pointer can go to.

 

The gauge has both major and minor tick marks which help the user know the numeric value the pointer is current set to.

Major Unit: A 'major' indicator will appear every 'x' values of the data fields unit.

Minor Unit: A 'minor' indicator will further divide up the 'major' units by placing a smaller indicator every 'x' values.

 

 

Start Angle: The angle the start of the arc begins at.

End Angle: The angle the end of the arc terminates at.

 

Reverse: Flip the scale 180 degrees (eg instead of 0 to 180 it would be 180 to 0)

 

 

 

Major and Minor tick marks are pretty self explanatory.  They help the user take the visual position of the pointer and correlate that to a numeric value.  It is advisable to have your major and minor units be factors of the difference in the scale for symmetry purposes.  You can change the tick mark sizes, color or even hide them altogether.

 

Labels are the numeric values being displayed on the scale which the pointers point to.  As with the other components you can change their position, size, color, spacing and various other aesthetic properties.  

 

Range

Ranges are colorful indicators which provide feedback on the current position and value of the pointer/sensor.  In most cases this is used to indicate either an 'ideal' range (eg pointer should strive to be inside the min/max of the range) or a progressive state towards good/bad (such as a green to red gradient).  

 

To build a range you must specify one or more colors which should be displayed with a start/end value.  If you wish to apply a gradient you must do so gradually as seen in the image on the left.

 

 

 

 

Run Time

Radial Gauges are, like other widgets, added to a layout via a Widget Group.  

 

Simply find the Radial Gauge node and expand it to see a list of all Radial gauge templates available to you.  Create a new one if needed or load a previously defined one into your group.  

 

 

The gauge you select should start and the pointer(s) will reflect the current value(s) of the underlying sensor data each is associated with.

 

 

 

 

 

 

SCSv5                                                                                                        Page 1 of 1